<template>
	<view class="container">
		
		<swiper autoplay circular class="bgImg boxS">
			<swiper-item>
				<image class="w-20"
					src="https://img.quexiaqp.com/uploads/20251010/649b08d3e92efb909082844db3f767fb.jpg"
					mode="widthFix" @click="bannerClick()"></image>
			</swiper-item>
			<swiper-item>
				<image class="w-20"
					src="https://img.quexiaqp.com/uploads/20250818/dbfe011003d3d8f6af35dc6b776c2d51.jpg"
					mode="widthFix" @click="bannerClick()"></image>
			</swiper-item>

		</swiper>
		
		<view class="searchbox r8 fs14 pb6 bgff m6 py6">
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{ active: currentTabIndex === index }" class="tab-item">
					<text>{{ tab.label }}</text>
				</view>
			</view>
		</view>
		
		<!-- 内容区 -->
		<scroll-view class="content-scroll-view" scroll-y :scroll-into-view="`section-${currentTabIndex}`" @scroll="onScroll" scroll-with-animation>
			<!-- 每个Tab对应的内容 -->
			<view v-for="(tab, index) in tabs" :key="index" :id="`section-${index}`" class="little-view r8 pb6 bgff m6 py6">
				<view class="r8 pb6 bgff m6 py6">
					<view class="tab-content-text">{{tab.label}}</view>
					
					<view v-if="tab.label == '合作政策'" class="">
						<view class="first-view">全托管式开店</view>
						<view>
							<view style="display: flex;">
								<view class="second-view">免费合作</view>
								<view class="second-view" style="margin-left: 5px;">免费设计</view>
							</view>
							<view style="display: flex;">
								<view class="second-view">免保证金</view>
								<br>
								<view class="second-view" style="margin-left: 5px;">免品牌使用费</view>
							</view>
						</view>
						<view class="first-view">
							<view>自助棋牌|台球|KTV 托管式开店</view>
						</view>
					<!-- 	<view class="first-view">
							<view>可自由组合、任意搭配、全部免费</view>
						</view> -->
						
					</view>
					
					<view v-if="tab.label == '合作支持'" class="sub-view">
						<view class="half-container left">
							<view class="box" v-for="(item, idx) in supportBoxLeft">
								<view style="padding: 3px 10px;color: #ffaa00;">{{item.text}}</view>
								<ul style="list-style-type: disc;font-size: 14px;">
									<li v-for="(question, index) in item.valueList" style="padding: 3px 8px;">
										{{question}}
									</li>
								</ul>
								
							</view>
						</view>
								
						<view class="half-container right">
							<view class="box" v-for="(item, idx) in supportBoxRight">
								<view style="padding: 3px 8px;color: #ffaa00;">{{item.text}}</view>
								<ul style="list-style-type: disc;font-size: 14px;">
									<li v-for="(question, index) in item.valueList" style="padding: 3px 8px;">{{question}}</li>
								</ul>
							</view>
						</view>
					</view>
					
					<view v-if="tab.label == '合作优势'" class="sub-view three-view">
						<view class="half-container left">
							<view class="box_2" v-for="(item, idx) in advantageBoxLeft">
								<view style="padding: 3px 8px;color: #ffaa00;">{{item.text}}</view>
								<view style="padding: 5px 8px;font-size: 14px;">
									<text>{{item.value}}</text>
								</view>
							</view>
						</view>
								
						<view class="half-container right">
							<view class="box_2" v-for="(item, idx) in advantageBoxRight">
								<view style="padding: 3px 8px;color: #ffaa00;">{{item.text}}</view>
								<view style="padding: 5px 8px;font-size: 14px;">
									<text>{{item.value}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view v-if="tab.label == '合作流程'" class="">
						<view>
							<image class="w-20"
								src="https://img.quexiaqp.com/uploads/20250325/f627377b485c9312eb5c754d45020c5b.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
				  { label: '合作政策', content: 'Content for Tab 1' },
				  { label: '合作支持', content: 'Content for Tab 2' },
				  { label: '合作优势', content: 'Content for Tab 3' },
				  { label: '合作流程', content: 'Content for Tab 4' }
				],
				currentTabIndex: 0,// 当前选中的标签索引
				boxes: [1, 2,3], // 每部分的长方体框数量
				supportBoxLeft:[
					{text:'选址支持',valueList:["• 提供专业选址指导\n","• 商圈评估,投资预估\n","• 实地勘察"]},
					{text:'开业支持',valueList:["• 制定开业营销方案\n","• 提供开业物料设计\n","• 协助定制套餐价格\n"]},
					{text:'运营支持',valueList:["• 监督门店运营管理\n","• 参与营销活动\n","• 经营数据分析"]},
				],
				supportBoxRight:[
					{text:'设计支持',valueList:["• 全套空间形象设计\n","• 整店装修施工设计\n","• 同步跟踪门店施工"]},
					{text:'人事支持',valueList:["• 提供人员教培方案\n","• 协助建立薪酬体系\n","• 协助完成人事制度"]},
					{text:'品牌支持',valueList:["• 品牌内容输出\n","• 美团抖音战略合作\n","• 线上平台粉丝引流\n"]},
				],
				advantageBoxLeft:[
					{text:'品牌优势',value:["雀侠是湖南启派旗下一家全国连锁品牌，致力于打造更受年轻人喜欢的线下娱乐社交空间。雀侠品牌知名度高、忠实粉丝数大，自带市场认可度。"]},
					{text:'成本优势',value:["雀侠自助KTV影咖相比传统KTV、影咖，不管是人工成本、运营成本还是店租成本都大幅度降低。"]},
					{text:'设计优势',value:["查勘测绘、合理布局、设计施工、专业团队、持续服务"]},
					{text:'运营优势',value:["雀侠拥有自己成熟的落地流程和专业运营团队，从开店选址到设计装修，设备采购到后续供应，线上运营到线下活动，全程陪伴，让合作伙伴拥有舒心省心的开店体验。"]},
					
				],
				advantageBoxRight:[
					{text:'营销优势',value:["定期为合作伙伴输出创意营销方案，激活当地客源，并在线上社交媒体推广，为合作伙伴的门店引流造势。联合美团抖音不定期做线上平台推广。"]},
					{text:'服务优势',value:["承诺从合作咨询、签约、筹备到开业后的全程跟进服务，并提供售后保障，解决合作伙伴后顾之忧。"]},
					{text:'培训优势',value:["提供专业培训服务，让合作伙伴快速在行业站位脚跟。"]},
					{text:'技术优势',value:["湖南启派拥有10年软硬件研发经验和6年无人共享设备经验，研发团队均来自百度、华为、联想等知名企业，自主开发全生态链智能共享一体化软硬件系统。"]},
					
				],
				section:0,
				isScrolling:false,
			}
		},
		onLoad(option) {
			console.log("进入页面的加载内容："+option.index);
			this.currentTabIndex = option.index;
			// this.selectTab(this.currentTabIndex);
		},
		methods: {
			selectTab(val) {
				console.log('===========获取的值为：'+val)
				this.currentTabIndex = val;
			},
			// 滑动内容区时更新Tab
			onScroll(e) {
				if (this.isScrolling) return;
				// console.log("=======:"+JSON.stringify(e.detail));
				const scrollTop = e.detail.scrollTop; // 获取当前滚动位置
				const query = uni.createSelectorQuery().in(this);
				
				query.selectAll('.little-view').boundingClientRect(rects => {
					for (let i = 0; i < rects.length; i++) {
						const sub_view = rects[i];
						console.log("======子view的参数======"+JSON.stringify(sub_view));
						if (sub_view.top >= 310 && sub_view.top < 370) {
							// 如果某个 section 进入可视区域顶部附近
							this.currentTabIndex = i;
							break;
						}
					}
				}).exec();
			},
			bannerClick() {
				uni.navigateTo({
					url: '/other/join/join'
				})
			},

		}
	}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满整个视口高度 */
}

.tabs {
  display: flex;
  padding: 5px; /* 调整根据需要 */
}

.tab-item {
  flex: 1; /* 使每个Tab均匀分配宽度 */
  text-align: center; /* 文本居中 */
  font-size: 16px;
  position: relative; /* 为伪元素提供定位上下文 */
  padding-bottom: 5px; /* 可以根据需要调整底部内边距 */
}

.tab-item text {
  display: block;
  padding: 10px 0; /* 增加内边距以便更好地控制下划线位置 */
}

.tab-item.active text {
  color: #ffaa00; /* 选中时的文字颜色 */
}

/* 使用伪元素 ::after 创建下划线 */
.tab-item::after {
  content: '';
  width: 50%; /* 宽度与文本相同 */
  height: 1px; /* 设置下划线的高度 */
  background-color: #ffaa00; /* 下划线的颜色 */
  position: absolute;
  margin-left: 25%;
  bottom: -2px; /* 调整这个值以增加或减少下划线与文本的距离 */
  display: none; /* 默认隐藏下划线 */
}

.tab-item.active::after {
  display: block; /* 当Tab被选中时显示下划线 */
}

.content-scroll-view {
  flex: 1;
  overflow: hidden;
}

.content-section {
  padding: 20px;
  margin-top: 15px;
  border-bottom: 1px solid #e5e5e5;
}

/* 每个Tab对应的内容 */
.sub-view {
  display: flex;
  flex-direction: row; /* 左右两部分 */
  height: 100%;
  box-sizing: border-box;
}

/* 左右两部分 */
.half-container {
  flex: 1;
  flex-direction: column; /* 竖直排列 */
  justify-content: space-around; /* 均匀分布 */
  align-items: center; /* 水平居中 */
}

/* 长方体框 */
.box {
  height: 120px; /* 固定高度 */
  margin: 10px 3px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}
.box_2{
	min-height: 109px; /* 最低高度 */
	margin: 10px 3px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
}

.bgImg {
	height: 524rpx;
}
.searchbox {
	position: relative;
	margin-top: -60rpx;
	z-index: 1;
	box-shadow: 0 2px 12px 0 rgba(1, 5, 0, 0.1); /* 阴影效果 */
}
.contentbox{
	margin-top: 12px;
	box-shadow: 0 2px 12px 0 rgba(1, 5, 0, 0.1); /* 阴影效果 */
}
.first-view{
	background-color: #ffaa00;
	text-align: center;
	padding: 20px 18px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 13px;
	color: #f0f0f0;
}
.second-view{
	flex: 1;
	background-color: #ffc0b0;
	text-align: center;
	padding: 8px 25px;
	box-sizing: border-box;
	border-radius: 8px;
	font-size: 15px;
	margin-bottom: 8px;
}

.node {
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 80px;
  height: 80px;
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.node-group {
  display: flex;
  align-items: center;
}

.arrow-right::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 1px solid #007bff;
  margin: 0 20px;
}
.tab-content-text{
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 10px;
}
</style>

